<template id="edit_profile">
	<div class="edit_profile">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/main"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>个人信息</p>
				<div class="about_select">
					<div class="about_ing"></div>
				</div>

			</div>
		</div>
		<!--头部结束-->
		<!--用户头像-->
		<div class="edit_photo" style="height: 91px;">
		 <div id="box"  >
			<div>
	        <div style="width: 80px;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;border-radius: 41px;"><img style="background-size: cover;
    width: 100%;" v-lazy="image" alt=""></div>
	
			<input  id="file" type="file"  @change="imageChange()" style="    width: 100px;
    position: absolute;
    opacity: 0;
    top: -3px;
    left: 36%;
    height: 50px;">
			</div>
		
		</div>	
		</div>
		<!--用户头像结束-->
		<!--修改个人信息-->
		<div style="clear: both;"></div>
		<div class="edit_means">

			<div class="deit_self">
				<p><span>昵</span><span>称</span></p>
				<div class="deit_input">
					<input type="text" name="" id=""  v-model="username"/>
					
				</div>
			</div>
			<div class="deit_self">
				<p><span>性</span><span>别</span></p>
				<div class="deit_input"  v-for="(math,index) in nameoptions" :key="index">
					<button class="btnBg" :class="[idx == index?'active':'']" @click="isActive(index)">{{math.gander}}</button>
				</div>
			</div>
			<div class="deit_self">
				<p><span>手</span><span>机</span><span>号</span></p>
				<div class="deit_info">
					<input type="number" name=""  v-model="phone" class="deit_ipt1"/>
					<button @click="timeDate()" :disabled="!sendAuthCode" :style="{background: sendAuthCode ? '#2d8f90' : '#ccc'}">{{sendAuthCode ? '获取验证码' : '重新获取' + auth_time + '秒' }}</button>
					<input class="deit_ipt2" type="number" v-model="yzm"/>
				</div>
			</div>
			<div class="deit_self">
				<p><span>钱</span><span>包</span></p>
				<div class="deit_input">
					<span>{{math.wallet_money}}元</span>
				</div>
			</div>
			<div class="deit_self">
				<p><span>押</span><span>金</span></p>
				<div class="deit_input">
					<span>0元</span>
				</div>
			</div>
			<div class="deit_self">
				<p><span>地</span><span>址</span></p>
				<router-link to="/select_address">
				<div class="deit_input">
					<input type="text" name="" id="" v-model="ad" />
				</div>
				</router-link>
			</div>

		</div>

		<!--修改个人信息结束-->

		<!--提交修改-->
		<div class="edit_submit" @click="edit_submit()">
			<button>提交修改</button>
		</div>
		<!--提交修改结束-->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				index:'',
				phone:'',
				yzm:'',
				image:'',
				auth_time: 0,
				isShow: false,
				math:'',
				newimg:'',
				ad:'',
				address:[],
				idx: '',
				sendAuthCode: true,
				nameoptions: [{
						"gander": "男",
					},
					{
						"gander": "女",

					},

				],

			}
		},
		created(){
				myCoach: {
				//let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				 var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				let obj = {
					//请求的参数
					sessionid: SESSION_ID.sessionid,
					userid: SESSION_ID.user.id,
					code: 1
				};
				let _this = this
				_this.sessionid = _this.$store.state.sessionid;
				let qs = require('qs');
				this.$axios.post("/yujia/user/showPersonalMessage", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
				_this.math = SESSION_ID.user
				_this.address = SESSION_ID.defaultaddress
				_this.username=SESSION_ID.user.username
				_this.idx=SESSION_ID.user.gender
				_this.phone=SESSION_ID.user.phone

				}).catch(function(error) {
					console.log(error);
				})
			}
		},
		mounted(){
		   var getadd = window.localStorage.getItem('add')
           this.ad = getadd
			var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				// console.log(SESSION_ID.user.phone)
				let _this = this
				let obj = {
						sessionid: SESSION_ID.sessionid,
						userid: SESSION_ID.user.id,
				};
				let qs = require('qs');
				this.$axios.post("/yujia/user/showPersonalMessage", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					// console.log(response.data.data.user.head_image)


					if(_this.image == null){
				     _this.image=SESSION_ID.user.head_image
				}else{
				  _this.image=response.data.data.user.head_image
				}
				}).catch(function(error) {
					console.log(error);
				})			
			this.box()
		},
		methods: {
			timeDate:function(){
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				console.log(SESSION_ID.user.phone)
				let _this = this
				let obj = {
					phone:_this.phone,
				};
				_this.sessionid = _this.$store.state.sessionid;
				let qs = require('qs');
				this.$axios.post("/yujia/user/captcha", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					// console.log(response.data.code)
					if(response.data.code == 1){
							_this.sendAuthCode = false;
							_this.auth_time = 60;
							var auth_timetimer = setInterval(() => {
								_this.auth_time--;
								if(_this.auth_time <= 0) {
									_this.sendAuthCode = true;
									clearInterval(auth_timetimer);
								}
							}, 1000);
					}else{
						mui.alert('短信发送失败')
					}
				}).catch(function(error) {
					console.log(error);
				})
				
			},
			imageChange:function(){
				setTimeout(()=>{
					var _this=this
					var file= document.getElementById('file').files[0]
					var formData = new FormData();
					formData.append('image', file);
					console.log(formData)
						let obj = {
						//请求的参数
						formData: formData,
					};
					$.ajax({
					url:"/yujia/admin/uploadimage",
					xhrFields:{
							withCredentials:true
					},
					type: "POST",
					cache: false,
					data: formData,
					processData: false,
					contentType:false,
					async: false,
					success: function (result) {
						console.log(result)
						if(result.message== '文件路径生成成功'){
							mui.alert('图片上传成功')
							_this.image=result.data
							window.localStorage.setItem('image',result.data)
							console.log(_this.image)
							// window.location.reload()
						}else if(result.code == '-1'){
							mui.alert(result.message)
						}
					}
         			 });
				})
			},
			box:function(){
				// var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				// console.log(SESSION_ID.user.head_image)
				// this.image=window.localStorage.getItem('image')
				// if(this.image == null){
				// //    if(this.image == ''){
				//    this.image=SESSION_ID.user.head_image
				// // }
				// }else{
				  
						// this.image=this.newimg

				// }
			},
			edit_submit(){
				let _this = this
				console.log(_this.phone ,_this.math.phone)
				if(_this.phone == _this.math.phone){
						var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
						let obj = {
							//请求的参数
							sessionid: SESSION_ID.sessionid,
							userid: SESSION_ID.user.id,
							username: _this.username,
							headImage:_this.image,
							gender:_this.idx,
							phone:_this.phone,   
							vcode:_this.yzm
						};
						// console.log(this)
						console.log(obj)
						// let _this = this
						_this.sessionid = _this.$store.state.sessionid;
						let qs = require('qs');
						this.$axios.post("/yujia/user/modifyPersonalMessage", qs.stringify(obj), {
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}

						}).then(function(response) {
						console.log(response)
						if(response.data.code == 1){
							mui.alert('修改成功')
						}else if(response.data.code ==0){
							mui.alert('修改失败')
						}else if(response.data.code == -1){
							mui.alert('修改异常')
						}
						}).catch(function(error) {
							console.log(error);
						})
				}else{
					if(_this.yzm == ''){
						mui.alert('请先获取验证码')
					}else{
						var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
						let obj = {
							//请求的参数
							sessionid: SESSION_ID.sessionid,
							userid: SESSION_ID.user.id,
							username: _this.username,
							headImage:_this.image,
							gender:_this.idx,
							phone:_this.phone,   
							vcode:_this.yzm
						};
						// console.log(this)
						console.log(obj)
						// let _this = this
						_this.sessionid = _this.$store.state.sessionid;
						let qs = require('qs');
						this.$axios.post("/yujia/user/modifyPersonalMessage", qs.stringify(obj), {
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}

						}).then(function(response) {
						console.log(response)
						if(response.data.code == 1){
							mui.alert('修改成功')
						}else if(response.data.code ==0){
							mui.alert('修改失败')
						}else if(response.data.code == -1){
							mui.alert('修改异常')
						}else if(response.data.code == -2){
							mui.alert("该手机号已被注册，请重试")
						}
						}).catch(function(error) {
							console.log(error);
						})
					}
				}
				
			},
			toggle: function() {            
				this.isShow = !this.isShow;          
			},
			isActive(index) {			
				this.idx = index
			},
		}
	}
</script>

<style scoped>
	@import "../../assets/css/edit_profile.css";
	.btnBg {
		background: white;
		color: #2d8f90;
	}
	
	.active {
		color: #fff;
		background: #2d8f90;
	}
	
	.moss {
		/*color: #fff;*/
		color: #fff;
		background: #2d8f90;
	}
	.edit_photo{
		position: relative;
	}
	.file{
		position: absolute;
		
	}
</style>